layui.use('element', function(){
    var element = layui.element; //导航的hover效果、二级菜单等功能，需要依赖element模块
    
    //监听导航点击
    element.on('nav(demo)', function(elem){
      //console.log(elem)
      layer.msg(elem.text());
    });
  });
//   --------------------
  function Tab() {
    var tabElement = document.getElementById('tab');
    var contentElement = document.getElementById('content');
    this.tabButtons = tabElement.querySelectorAll('input'); // 获取tab中所有的button按钮
    this.tabItems = contentElement.querySelectorAll('.item');
    // for 循环,给每一个buttons绑定一个click事件
    var len = this.tabButtons.length;
    for (var i = 0; i < len; i++) {
        this.tabButtons[i].index = i;
        var _this = this;
        this.tabButtons[i].onmousemove = function() {
            _this.changeActive(this, _this);
        }
    }
}
Tab.prototype.changeActive = function(dom, _this) {
    var index = dom.index; // 获取当前被点击元素的索引值
    var len = document.getElementById('tab').querySelectorAll('input').length;
    for (var j = 0; j < len; j++) {
        // 对所有的tab按钮 置灰,对所有的content 隐藏
        _this.tabButtons[j].style.background = 'grey';
        _this.tabItems[j].style.display = 'none';
        // 对当前被点击的tab按钮 高亮,当前对应的content 显示
        _this.tabButtons[index].style.background = 'green';
        _this.tabItems[index].style.display = 'block';


    }
}
var tab1 = new Tab();
//------------------------
function Tabs() {
    var tabElement = document.getElementById('tabs');
    var contentElement = document.getElementById('contents');
    this.tabButtons = tabElement.querySelectorAll('input'); // 获取tab中所有的button按钮
    this.tabItems = contentElement.querySelectorAll('.items');
    // for 循环,给每一个buttons绑定一个click事件
    var len = this.tabButtons.length;
    for (var i = 0; i < len; i++) {
        this.tabButtons[i].index = i;
        var _this = this;
        this.tabButtons[i].onmousemove = function() {
            _this.changeActive(this, _this);
        }
    }
}
Tabs.prototype.changeActive = function(dom, _this) {
    var index = dom.index; // 获取当前被点击元素的索引值
    var len = document.getElementById('tabs').querySelectorAll('input').length;
    for (var j = 0; j < len; j++) {
        // 对所有的tab按钮 置灰,对所有的content 隐藏
        _this.tabButtons[j].style.background = 'grey';
        _this.tabItems[j].style.display = 'none';
        // 对当前被点击的tab按钮 高亮,当前对应的content 显示
        _this.tabButtons[index].style.background = 'green';
        _this.tabItems[index].style.display = 'block';


    }
}
var tab2 = new Tabs();